<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ include file="../common/include.jsp"%>    
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>码表管理</title>
</head>
<body>
	<h2>Editable TreeGrid</h2>
	<div class="demo-info">
		<div class="demo-tip icon-tip"></div>
		<div>选中节点点击添加就是添加子节点 点击编辑就是编辑当前节点 点击删除是删除当前节点</div>
	</div>
	<div style="margin:10px 0;">
		<a href="javascript:void(0)" class="easyui-linkbutton" onclick="add('append')">添加子节点</a>
		<a href="javascript:void(0)" class="easyui-linkbutton" onclick="add('insert')">添加同级节点</a>
		<a href="javascript:void(0)" class="easyui-linkbutton" onclick="edit()">编辑</a>
		<a href="javascript:void(0)" class="easyui-linkbutton" onclick="save()">保存</a>
		<a href="javascript:void(0)" class="easyui-linkbutton" onclick="cancel()">取消</a>
	</div>
	<div id="mm" class="easyui-menu" style="width:120px;">
		<div onclick="add('append')" data-options="iconCls:'icon-add'">添加子节点</div>
		<div onclick="add('insert')" data-options="iconCls:'icon-add'">添加同级节点</div>
		<div onclick="remove()" data-options="iconCls:'icon-remove'">删除</div>
		<div class="menu-sep"></div>
		<div onclick="collapse()">折叠</div>
		<div onclick="expand()">展开</div>
	</div>
	<table id="tg"></table>

	<script type="text/javascript">
		var addUrl = 'addConfig';
		var updateUrl = 'updateConfig';
		var localUseUrl = '';
		//加载tree
		$('#tg').treegrid({  
		    url:'getConfigs', 
		    animate:true,
		    idField:'configId',
		    collapsible: true,
		    fitColumns: true,
		    treeField:'name',
		    onContextMenu: onContextMenu,
		    onBeforeExpand:function(row,param){
		    	if(row){
		    			$(this).treegrid('options').url='getConfigs?pid='+row.configId;
		    	}
		    },
		    onAfterEdit:function(row,changes){
		    	var params = "";
 		    	$.each(row,function(key,value){
		    		if(key!="_parentId"&&key!="parent"&&value!=""){
		    			params = params+key+"="+value+"&";
		    		}
		    	});
		    	params = params.substring(0,params.lastIndexOf('&'));
		    	if(row){
		    		$.ajax({
		    			type:'POST',
		    			url:localUseUrl,
		    			data:params,
		    			dataType:'html',
		    			success:function(rs){
		    				showMsgDialog(rs,null,"info");
		    			}
		    		});
		    	}
		    },
		    columns:[[  
		        {field:'configId',title:'配置ID',editor:'text',align:'center'},  
		        {field:'name',title:'名称',editor:'text',align:'center'},  
		        {field:'type',title:'类型',editor:'text',align:'center'},  
		        {field:'parentId',title:'父ID',editor:'text',align:'center'},
		        {field:'valid',title:'是否有效',editor:'text',align:'center'}, 
		        {field:'leaf',title:'是否叶子节点',editor:'text',align:'center'}, 
		        {field:'remark',title:'备注',editor:'text',align:'center'},
		        {field:'rwFlag',title:'读写标记',editor:'numberbox',align:'center'}, 
		        {field:'order',title:'排序',editor:'numberbox',align:'center'},  
		        {field:'createTime',title:'创建时间',editor:'datebox',align:'center'},  
		        {field:'extString1',title:'拓展字段1',editor:'text',align:'center'},  
		        {field:'extString2',title:'拓展字段2',editor:'text',align:'center'},  
		        {field:'extString3',title:'拓展字段3',editor:'text',align:'center'},  
		        {field:'extString4',title:'拓展字段4',editor:'text',align:'center'},  
		        {field:'extString5',title:'拓展字段5',editor:'text',align:'center'},  
		        {field:'extString6',title:'拓展字段6',editor:'text',align:'center'}
		    ]]  
		}); 
		
		var editingId;//当前编辑ID
		//右击菜单
		function onContextMenu(e,row){
			e.preventDefault();
			$(this).treegrid('select', row.configId);
			$('#mm').menu('show',{
				left: e.pageX,
				top: e.pageY
			});
		}
		//增加  operate的值 如果是insert代表添加同级节点  其它为添加子节点
		function add(operate){
			$.messager.prompt('ID输入框', '请输入要添加的配置ID', function(tempId){
				if (tempId){
					var node = $('#tg').treegrid('getSelected');
					var parentId = "";
					
					if(operate == "insert"){
						parentId = node.parentId;
					}else{
						parentId = node.configId;
					}
					$('#tg').treegrid('append',{
						parent: parentId,
						data: [{
							configId: tempId,
							parentId:parentId
						}]
					});
					editingId = tempId;
					$('#tg').treegrid('beginEdit', editingId);
					localUseUrl = addUrl;
				}
			});

		}
		//编辑
		function edit(){
			if (editingId != undefined){
				$('#tg').treegrid('select', editingId);
				return;
			}
			var row = $('#tg').treegrid('getSelected');
			if (row){
				editingId = row.configId;
				$('#tg').treegrid('beginEdit', editingId);
				localUseUrl = updateUrl;
			}
		}
		//保存
		function save(){
			if (editingId != undefined){
				var t = $('#tg');
				t.treegrid('endEdit',editingId);
				editingId = undefined;
			}
		}
		//取消
		function cancel(){
			if (editingId != undefined){
				$('#tg').treegrid('cancelEdit', editingId);
				editingId = undefined;
			}
		}
		
		//删除
		function remove(){
			var node = $('#tg').treegrid('getSelected');
			if (node){
	    		$.ajax({
	    			type:'POST',
	    			url:'deleteConfig',
	    			data:{
	    				configId:node.configId
	    				},
	    			success:function(rs){
	    				showMsgDialog(rs,null,"info");
	    				$('#tg').treegrid('remove', node.configId);
	    			},
	    			error:function(rs){
	    				showMsgDialog(rs,null,"error");
	    			}
	    		});
				
			}
		}
		
		//折叠所有节点
		function collapse(){
			var node = $('#tg').treegrid('getSelected');
			if (node){
				$('#tg').treegrid('collapse', node.configId);
			}
		}
		//展开所有节点
		function expand(){
			var node = $('#tg').treegrid('getSelected');
			if (node){
				$('#tg').treegrid('expand', node.configId);
			}
		}
	</script>

</body>
</html>